<template>
  <div class="container">
    <!-- 顶部栏 -->
    <g-header>
    </g-header>
    <!-- 广告 -->
    <div class="banner-container">
      <img class="banner" src="../assets/banner.png" alt="">
    </div>
    <!-- 关于我们 -->
    <div class="abount-us-container">
      <img class="logo" src="../assets/关于我们.png" alt="">

      <div class="content">
        <p>Belle reve是由菲律宾梦工厂生化科技有限公司与2018年注册的专注于解决肌肤抗老难题。该品牌建立的基础是在于我们执着于寻求更好的护肤美妆解决方案与对客户多尽一份责任。我们认为BR能够做到的有效，更天然，更经济，更环保，更智能，功能性更强，以及提供更好的服务...</p>
        <div class="btn">查看更多></div>
      </div>
      <div class="advertisement-container">
        <g-banner class="banner-1"></g-banner>
      </div>
    </div>
    <!-- 新闻动态 -->
    <div class="news-container">
      <img class="logo" src="../assets/新闻动态.png" alt="">
      <div class="btn-list">
        <div class="btn">最新新闻</div>
        <div class="btn active">公司新闻</div>
        <div class="btn">行业资讯</div>
      </div>
      <div class="news-list">
        <div class="news">
          <p class="title">企业网站应该多长时间备份一次？</p>
          <p class="content">企业网站的信息量一般比较少，使用MetInfo企业网站管理系统让网站备份操 作非常简单，我们建议用户没有必要经常去备份网站，一般只需要做到一下几点 即可</p>
          <p class="read-more">查看详情>></p>
        </div>
        <div class="news" style="float:left !important;margin-left:20px;">
          <p class="title">企业网站应该多长时间备份一次？</p>
          <p class="content">企业网站的信息量一般比较少，使用MetInfo企业网站管理系统让网站备份操 作非常简单，我们建议用户没有必要经常去备份网站，一般只需要做到一下几点 即可</p>
          <p class="read-more">查看详情>></p>
        </div>
        <div class="news">
          <p class="title">企业网站应该多长时间备份一次？</p>
          <p class="content">企业网站的信息量一般比较少，使用MetInfo企业网站管理系统让网站备份操 作非常简单，我们建议用户没有必要经常去备份网站，一般只需要做到一下几点 即可</p>
          <p class="read-more">查看详情>></p>
        </div>
        <div class="news" style="float:left !important;margin-left:20px;">
          <p class="title">企业网站应该多长时间备份一次？</p>
          <p class="content">企业网站的信息量一般比较少，使用MetInfo企业网站管理系统让网站备份操 作非常简单，我们建议用户没有必要经常去备份网站，一般只需要做到一下几点 即可</p>
          <p class="read-more">查看详情>></p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import header from '@/components/header'
  import banner from '@/components/banner'
  export default {
    components: {
      'g-header': header,
      'g-banner': banner
    }
  }

</script>
<style lang="less" scoped>
  @import url('../style/mixin.less');
  .container {
    width: 100%;
    height: 100%;
    .banner-container {
      .On-xs( {
        width: 100%;
        overflow-x: hidden;
        height: 240px;
        position: relative;
      }
      );
      .banner {
        height: 600px;
        .On-xs( {
          height: 240px;
          position: absolute;
          clip: rect(0px 375px 375px 0);
          overflow: hidden;
          left: 0;
        }
        )
      }
    }
    .abount-us-container {
      height: 550px;
      width: 100%;
      .On-xs( {
        height: 456px;
      }
      );
      .logo {
        width: 87px;
        height: 77px;
        margin: 0 calc(50% - 41.5px);
        padding-top: 51px;
        float: left;
        display: block;
        .On-xs( {
          width: 56px;
          height: 50px;
          padding-top: 25px;
          margin: 0 calc(50% - 28px);
        }
        )
      }
      .content {
        width: 50%;
        height: 422px;
        float: left;
        .On-xs( {
          width: 100%;
          height: 181px;
        }
        );
        p {
          width: 559px;
          font-size: 16px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 24px;
          letter-spacing: 0px;
          color: #a17656;
          text-align: left;
          padding-left: calc(100% - 559px - 41px);
          padding-top: 56px;
          .Mult-line(4);
          .On-xs( {
            width: calc(100% - 40px);
            height: 93px;
            margin: 0 20px;
            font-family: MicrosoftYaHei;
            font-size: 12px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 18px;
            letter-spacing: 0px;
            color: #a17656;
            padding-top: 24px;
            .Mult-line(5);
          }
          )
        }
        .btn {
          width: 100px;
          height: 30px;
          border-radius: 3px;
          border: solid 1px #a17657;
          font-size: 14px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 30px;
          letter-spacing: 0px;
          color: #a3795b;
          margin-left: calc(100% - 559px - 41px);
          margin-top: 215px;
          .On-xs( {
            width: 80px;
            height: 24px;
            margin-top: 20px;
            margin-left: calc(50% - 40px);
            line-height: 24px;
            font-size: 12px;
          }
          )
        }
      }
      .advertisement-container {
        width: 50%;
        height: 422px;
        float: left;
        .On-xs( {
          width: 100%;
          height: 200px;
        }
        );
        .banner-1 {
          margin-top: 52px;
          .On-xs( {
            margin-top: 0
          }
          )
        }
      }
    }
    .news-container {
      height: 750px;
      width: 100%;
      background: #ffedc9;
      position: relative;
      overflow: hidden;
      .On-xs( {
        height: auto;
        padding-bottom: 20px;
      }
      );
      .logo {
        width: 87px;
        height: 77px;
        margin: 0 calc(50% - 41.5px);
        padding-top: 51px;
        float: left;
        display: block;
        .On-xs( {
          width: 56px;
          height: 50px;
          padding-top: 25px;
          margin: 0 calc(50% - 28px);
        }
        )
      }
      .btn-list {
        height: 30px;
        position: absolute;
        transform: translateX(-50%);
        left: 50%;
        top: 185px;
        .On-xs( {
          height: 24px;
          top: 100px;
          left: 0;
          transform: translateX(calc((375px - 100%)/2));
        }
        );
        .btn {
          width: 100px;
          height: 30px;
          border-radius: 3px;
          border: solid 1px #a17657;
          font-family: MicrosoftYaHei;
          font-size: 15px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 30px;
          letter-spacing: 0px;
          color: #a17657;
          float: left;
          margin: 0 15px;
          box-sizing: border-box;
          &.active {
            background: #a17657;
            color: #FFF;
          }
          .On-xs( {
            width: 80px;
            height: 24px;
            font-size: 12px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 24px;
            letter-spacing: 0px;
            color: #a17657;
            margin: 0 5px;

          }
          )
        }
      }
      .news-list {
        width: 100%;
        padding-top: 215px;
        .On-xs( {
          padding-top: 100px;
        }
        );
        .news {
          width: calc(50% - 360px);
          height: 196px;
          float: left;
          padding: 0 20px;
          box-sizing: border-box;
          margin-top: 47px;
          border-bottom: 1px solid #a17657;
          margin-left: 360px;
          .On-xs( {
            width: calc(100% - 40px);
            height: 103px;
            margin: 0;
            padding: 0;
            margin: 0 20px;
            margin-top: 23px;
            &:first-child {
              margin-top: 67px;
            }
          }
          );
          .title {
            float: right;
            width: 581px;
            height: 16px;
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 16px;
            letter-spacing: 0px;
            color: #543e2e;
            text-align: left;
            .On-xs( {
              width: 100%;
              height: 13px;
              font-family: MicrosoftYaHei;
              font-size: 12px;
              font-weight: normal;
              font-stretch: normal;
              line-height: 13px;
              letter-spacing: 0px;
              color: #543e2e;
            }
            );
          }
          .content {
            float: right;
            width: 581px;
            height: 72px;
            text-align: left;
            margin-top: 57px;
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 24px;
            letter-spacing: 0px;
            color: #a17656;
            .Mult-line(3);
            .On-xs( {
              width: 100%;
              height: 45px;
              margin-top: 14px;
              font-size: 11px;
              line-height: 15px;
              letter-spacing: 0px;
              color: #a17656;
            }
            );
          }
          .read-more {
            float: right;
            width: 581px;
            text-align: right;
            height: 15px;
            font-family: MicrosoftYaHei;
            font-size: 14px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 0px;
            letter-spacing: 0px;
            color: #a17657;
            margin-top: 15px;
            .On-xs( {
              font-size: 10px;
              line-height: 10px;
              margin-top: 0;
              padding-top: 10px;
            }
            )
          }
        }
      }
    }
  }

</style>
